<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/incubator-echarts-4.9.0/map/js/china.js"></script>
    <!--
    <script src="static/js/incubator-echarts-4.9.0/map/json/china-cities.json"></script>
    <script src="static/js/incubator-echarts-4.9.0/map/json/china-contour.json"></script>-->
    <script src="static/js/echarts-wordcloud-master/dist/echarts-wordcloud.min.js"></script>

    <title>Document</title>
    <link rel="stylesheet" href="static/css/shouye.css">
</head>

<body>
<div class="box">

    <div class="div-left">
        <div id="left1" class="column-1">
            <script>
                var myBar = echarts.init(document.getElementById('left1'));
            // 显示标题，图例和空的坐标轴
            myBar.showLoading()
            myBar.setOption({
                //先将图表模板加载出来
                title: {
                    text: '房价与面积'
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type:"cross",
                        snap:true
                    }
                },
                yAxis: [
                    {
                    type:"value",
                    name:"房价",
                    min:1000,
                    max:60000,
                    interval:5000,
                    axisLabel:{
                        formatter:"{value}/元",
                        rotate:45,
                        margin:5
                    },
                        splitLine:{show:false}
                },
                    {
                    type: "value",
                    name: "面积",
                    min:15,
                    max:600,
                    interval:60,
                    axisLabel: {
                        formatter: "{value}/㎡",
                        rotate:-45,
                        margin:5
                    },
                    splitLine:{show:false}
                    }

                ],
                dataZoom: [{
                    start: 80,
                    type: "inside"
                  }, {
                    start: 80
                  }],
                legend: {
                    show:true,
                    data:["房价","面积"]
                },
                xAxis: {
                    data: [],
                    splitLine:{show:false}
                },
                series: [{
                    name: '房价',
                    type: 'bar',
                    data: []
                },{
                    name: "面积",
                    type: "line",
                    data: [],
                    yAxisIndex:1,
                    smooth:true //设置折线图为平滑
                }]
            });
            $(function () {
                setInterval(bar, 10000)

                // 异步加载数据
                function bar() {
                    $.get('http://127.0.0.1:5000/ran').done(function (data) {
                        // 填入数据
                        myBar.hideLoading()
                        myBar.setOption({
                            xAxis: {
                                data: data.title
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '房价',
                                data: data.barData
                            }, {
                                name: "面积",
                                data: data.lineData
                            }]
                        });
                    });
                }
            })
            </script>

        </div>
        <div id="left2" class="column-2">
            <script>
                var myPie = echarts.init(document.getElementById("left2"))
                var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
                myPie.showLoading()
                myPie.setOption({
                    title: {
                        text: "全国平均房价饼图"
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        formatter: '{b}:{d}% <br/> {c}'
                    },
                    legend: {
                        orient: 'vertical',
                        top: "0%",
                        left: "80%",
                        data: []
                    },
                    series: [{
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: ['24%', '35%'],
                        clockwise: true,
                        avoidLabelOverlap: true,
                        hoverOffset: 15,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{a|{b}：{d}%}\n{hr|}',
                            rich: {
                                hr: {
                                    backgroundColor: 't',
                                    borderRadius: 3,
                                    width: 3,
                                    height: 3,
                                    padding: [3, 3, 0, -12]
                                },
                                a: {
                                    padding: [-30, 15, -20, 15]
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 20,
                                length2: 30,
                                lineStyle: {
                                    width: 1
                                }
                            }
                        },
                        data: [],
                    }
                    ]

                });
                $(function () {
                    setInterval(pie, 10000)

                    function pie() {
                        $.get("http://127.0.0.1:5000/pie/random").done(function (data) {
                            myPie.hideLoading()
                            myPie.setOption({
                                legend: {
                                    data: data.title
                                },
                                series: [{
                                    name: "全国房价",
                                    data: data.dataPie
                                }]
                            })

                        })
                    }

                })
            </script>
        </div>


        <div id="left3" class="column-3">
            <script>
            var left_work = echarts.init(document.getElementById('left3'));
                left_work.showLoading()
                left_work.setOption({
                    title: {
                        text: "热门标签"
                    },
                    tooltip: {},
                    series: [{
                        type: 'wordCloud',
                        gridSize: 2,
                        sizeRange: [12, 50],
                        rotationRange: [-90, 90],
                        shape: 'pentagon',
                        width: 600,
                        height: 400,
                        drawOutOfBound: true,
                        textStyle: {
                            normal: {
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 60),
                                        Math.round(Math.random() * 60),
                                        Math.round(Math.random() * 60)
                                    ].join(',') + ')';
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: []
                    }]
                });

                $(function () {
                        setInterval(workerCount, 10000)

                        function workerCount() {
                            $.get("http://127.0.0.1:5000/left/work").done(function (result_data) {
                                left_work.hideLoading()
                                left_work.setOption({
                                    series: {
                                        data: result_data.workData
                                    }
                                })

                            })
                        }

                    }
                );
                window.onresize = left_work.resize;

            </script>
        </div>
    </div>


    <div class="div-content">
        <div id="Card" class="son-1">

        </div>
        <div id="mid2" class="son-2">
            <script>

                var myMap = echarts.init(document.getElementById("mid2"))
                myMap.showLoading();
                myMap.setOption({
                    title: {
                        text: '中国房价',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        type: 'piecewise',
                        pieces: [
                            {min: 0, max: 2000, label: '价格正常'},
                            {min: 2001, max: 4000, label: '价格偏高'},
                            {min: 4001, max: 9999, label: '价格高'},
                            {min: 10000, label: "奢侈"}
                        ]
                    },
                    roamController: {
                        show: true,
                        left: 'right',
                        mapTypeControl: {
                            'china': true
                        }
                    },
                    series: [
                        {
                            name: '价格',
                            type: 'map',
                            mapType: 'china',
                            roam: true,
                            label: {
                                show: true
                            },
                            data: []
                        }
                    ]
                });
                $(function () {
                    setInterval(chian_up, 5000)

                    function chian_up() {
                        $.get('http://127.0.0.1:5000/index/map').done(function (result_data) {
                            myMap.hideLoading();
                            myMap.setOption({
                                series: {
                                    name: "价格",
                                    data: result_data.mapData
                                }
                            })
                        })
                    }
                })
            </script>
        </div>
    </div>

    <div class="div-right">
        <div id="right1" class="right-1">

            <script>
                var zhuzhuang = echarts.init(document.getElementById("right1"))
                var xMax = 20000;
                var dataShadow = [];
                var data = []

                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(xMax);
                }
                zhuzhuang.showLoading()
                zhuzhuang.setOption({
                    tooltip: {
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },

                    title: {
                        text: '各城市在售数量',
                        show: true
                    },
                    yAxis: {
                        data: [],


                        axisLabel: {
                            inside: true,
                            fontSize: 10,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true
                        },
                        z: 10
                    },
                    xAxis: {

                        axisLine: {
                            show: true
                        },
                        axisTick: {
                            show: true
                        },
                        axisLabel: {
                            fontSize: 10,
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },

                    series: [{ // For shadow
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0.05)'
                                }
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: dataShadow,
                            animation: true
                        },
                        {
                            name:"在售数量",
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [{
                                                offset: 0,
                                                color: '#6950a1'
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#6950a1'
                                            },
                                            {
                                                offset: 1,
                                                color: '#6950a1'
                                            }
                                        ]
                                    )
                                },
                                emphasis: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [{
                                                offset: 0,
                                                color: '#6950a1'
                                            },
                                            {
                                                offset: 0.7,
                                                color: '#6950a1'
                                            },
                                            {
                                                offset: 1,
                                                color: '#6950a1'
                                            }
                                        ]
                                    )
                                }
                            },
                            data: []
                        }
                    ]
                })
                $(function () {
                    setInterval(right, 10000)

                    function right() {
                        $.get('http://127.0.0.1:5000/right/bar').done(function (result) {
                            zhuzhuang.hideLoading();
                            zhuzhuang.setOption({
                                yAxis: {
                                    data:result.title
                                },
                                series: {
                                    name: "在售数量",
                                    data: result.data
                                }
                            })
                        })
                    }
                })

            </script>
        </div>
        <div id="right2" class="right-2">
            <script>
                var getfpkszb = [62.35];
                var getfpkszb1 = [0.01];
                var getfpksrs = [1265];
                var mybili = echarts.init(document.getElementById("right2"))
                mybili.showLoading()
                mybili.setOption({
                    backgroundColor: '#fff',
                    title: {
                        text: [] + '%',
                        textStyle: {
                            color: '#559BF4',
                            fontSize: 15
                        },

                        subtext: '精装修率',
                        subtextStyle: {
                            color: '#B1B1B1',
                            fontSize: 15
                        },
                        itemGap: 20,
                        left: 'center',
                        top: '43%'
                    },
                    tooltip: {
                        formatter: function(params) {
                            return '<span style="color: #fff;">比例：' + [] + '栋</span>';
                        }
                    },
                    angleAxis: {
                        max: 100,
                        clockwise: true, // 逆时针
                        // 隐藏刻度线
                        show: false
                    },
                    radiusAxis: {
                        type: 'category',
                        show: true,
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,

                        },
                        axisTick: {
                            show: false
                        },
                    },
                    polar: {
                        center: ['50%', '50%'],
                        radius: '100%' //图形大小
                    },
                    series: [{
                        name:"test",
                        stack: '测试',
                        type: 'bar',
                        data: [],
                        showBackground: true,
                        backgroundStyle: {
                            color: '#EFF2F5',
                            borderColor: '#EFF2F5',
                            borderWidth: 3
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 30,
                        silent: true,
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#5CBEFF'
                                }, {
                                    offset: 1,
                                    color: '#518FEF'
                                }]),
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#5CBEFF'
                                }, {
                                    offset: 1,
                                    color: '#518FEF'
                                }]),
                                borderWidth: 3
                            }
                        },
                    }, {
                        stack: '测试',
                        type: 'bar',
                        data: getfpkszb1,
                        showBackground: true,
                        backgroundStyle: {
                            color: '#EFF2F5',
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowBlur: 10,
                            shadowOffsetY: 2,

                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 30,
                        itemStyle: {
                            color: '#90BDFF',
                            borderColor: 'rgba(81,143,239, 1)',
                            borderWidth: 3
                        },
                    }]
                })
                 $(function () {
                    setInterval(bl, 10000)

                    function bl() {
                        $.get("http://127.0.0.1:5000/bili").done(function (result) {
                            mybili.hideLoading()
                            mybili.setOption({
                                title: {
                                        text: result.bili + '%',
                                        },
                                tooltip: {
                        formatter: function(params) {
                            return '<span style="color: #fff;">比例：' + result.count + '间</span>';
                        }
                    },
                                series: [{
                                    name: "test",
                                    data: result.bili
                                }]
                            })

                        })
                    }

                })
            </script>

        </div>
        <div id="right3" class="right-3">
            <script>
                var myWork = echarts.init(document.getElementById('right3'));
                myWork.showLoading()
                myWork.setOption({
                    title: {
                        text: "热门房型"
                    },
                    tooltip: {},
                    series: [{
                        type: 'wordCloud',
                        gridSize: 2,
                        sizeRange: [12, 50],
                        rotationRange: [-90, 90],
                        shape: 'pentagon',
                        width: 600,
                        height: 400,
                        drawOutOfBound: true,
                        textStyle: {
                            normal: {
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 60),
                                        Math.round(Math.random() * 60),
                                        Math.round(Math.random() * 60)
                                    ].join(',') + ')';
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        data: []
                    }]
                });

                $(function () {
                        setInterval(workerCount, 10000)

                        function workerCount() {
                            $.get("http://127.0.0.1:5000/work").done(function (result_data) {
                                myWork.hideLoading()
                                myWork.setOption({
                                    series: {
                                        data: result_data.workData
                                    }
                                })

                            })
                        }

                    }
                );
                window.onresize = myWork.resize;

            </script>
        </div>
    </div>


</div>
</body>

</html>